import React, { useEffect, useState } from 'react';
import { Card, Button, Input, Tabs, Dropdown, Menu } from 'antd';
import { PlusSquareOutlined, DownOutlined } from '@ant-design/icons';

import { queryListsApi } from './service';
import { getRequest } from '@/utils/request';

import './index.less';

export interface IProps {
  /** 属性描述 */
  [key: string]: any;
}

// 参与状态
const joinStatusMap: IObj = {
  total: '全部参与项目',
  project_owner: '我发起的项目',
  project_partner: '我受邀的项目',
};

// 项目状态
const projectStatusMap: IObj = {
  total: '全部项目状态',
  keyan_not_start: '创建中',
  keyan_running: '进行中',
  keyan_locked: '已锁定',
};

/**
* List
* @description 科研列表页面
* @create 2021-03-28 20:47:35
*/
const Coms = (props: IProps) => {
  const [projectLists, setProjectLists] = useState<any[]>([]);
  const [joinStatus, setJoinStatus] = useState<string>('total');
  const [projectStatus, setProjectStatus] = useState<string>('total');

  const [searchKey, setSearchKey] = useState<string>('');

  // 查询项目列表数据
  const queryListsData = async () => {
    const resp = await getRequest(queryListsApi, {
      data: {}
    });

    const { department_list, project_list } = resp.data || {};

    setProjectLists(project_list);
  }

  useEffect(() => {
    queryListsData();
  }, []);

  const renderMenu = (menuData: IOptions[], active: string, field: string) => {
    return (
      <Menu activeKey={active} onClick={({ key }) => {
        field === 'joinStatus' && setJoinStatus(key as string);
        field === 'projectStatus' && setProjectStatus(key as string);
      }}>
        {menuData.map(el => (
          <Menu.Item key={el.value as any}>
            <a>{el.label}</a>
          </Menu.Item>
        ))}
      </Menu>
    )
  };

  const renderSearch = () => {
    const joinStatusData: IOptions[] = Object.keys(joinStatusMap).map(el => ({
      label: joinStatusMap[el] as string,
      value: el,
    }));

    const peojectStatusData: IOptions[] = Object.keys(projectStatusMap).map(el => ({
      label: projectStatusMap[el] as string,
      value: el,
    }));

    return (
      <div className="header-extra">
        <Dropdown className="extra-select-item" overlay={renderMenu(joinStatusData, joinStatus, 'joinStatus')} trigger={['click']}>
          <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            {joinStatusMap[joinStatus]} <DownOutlined />
          </a>
        </Dropdown>

        <Dropdown className="extra-select-item" overlay={renderMenu(peojectStatusData, projectStatus, 'projectStatus')} trigger={['click']}>
          <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            {projectStatusMap[projectStatus]} <DownOutlined />
          </a>
        </Dropdown>

        <Input.Search
          placeholder="请输入关键词"
          value={searchKey}
          onChange={e => setSearchKey(e.target.value)}
          style={{width: '250px', marginRight: '12px'}}
        />

        <Button type="primary" icon={<PlusSquareOutlined />}>新增项目</Button>
      </div>
    );
  };

  // content-item
  const renderContentItem = (record: any) => {

    return (
      <li className="content-item">
        <Card title={record.name} className="content-project">
          1
        </Card>

        <Card title={`研究对象总数 ${record.total_count}`} className="content-target">
          2
        </Card>
      </li>
    )
  };

  return (
    <div className="project-page">
      <div className="project-page-header">
        <Tabs tabBarExtraContent={renderSearch()} activeKey="1">
          <Tabs.TabPane tab={`我的项目 ${projectLists.length}`} key="1" />
        </Tabs>
      </div>

      <ul className="project-content">
        {projectLists.map(el => renderContentItem(el))}
      </ul>
    </div>
  );
}

export default Coms;
